home *** CD-ROM | disk | FTP | other *** search
/ Mac Magazin/MacEasy 12 / Mac Magazin and MacEasy Magazine CD - Issue 12.iso / Sharewarebibliothek / DFÜ / Internet / HTML Web Weaver / HTML Web Weaver 2.5.2 / HTML Web Weaver 2.5.2.rsrc / TEXT_8887_Tutorial.txt < prev    next >
Text File  |  1995-07-03  |  13KB  |  182 lines

  1. <HTML> 
  2. <HEAD> 
  3. <TITLE>How to Web Weave with Web Weaver</TITLE>
  4. <CENTER><H1>How to Web Weave with Web Weaver</H1></CENTER>
  5. <HR> 
  6.  
  7. <CENTER><IMG  WIDTH=378  HEIGHT=230  Align=Center SRC="WWLogo.GIF"></CENTER>
  8.  
  9.  
  10. <PRE>
  11. </PRE><P><HR NOSHADE> 
  12. </HEAD> 
  13. <BODY> 
  14. <H3>Topics</H3>
  15. <UL><LI> <A HREF = "#WWW">What is World Wide Web?</A>
  16. <LI> <A HREF = "#Intro To WW?">What is HTML Web Weaver?</A>
  17. <LI> How do I....
  18. <UL><LI> <A HREF = "#Text Styles">make different styles of text?</A>
  19. <LI> <A HREF = "#Adding Graphics">add those cool graphics?</A>
  20. <LI> <A HREF = "#Connecting/Linking">connect my page to other peoples pages and other services?</A>
  21. <LI> <A HREF = "#Getting Started">get started?</A>
  22. </UL>
  23. <LI><A HREF = "#Why WW?">What does HTML Web Weaver offer to make all this easier/better?</A>
  24. </UL><P>
  25. <HR WIDTH=50> <P>
  26. <HR WIDTH=300> <P>
  27. <HR WIDTH=50> <P>
  28. <P><HR><A NAME="WWW"><CENTER><H2>What is World Wide Web?</H2></CENTER></A>
  29. The World Wide Web in simplest terms is an internationally networked organized collection of information.<P>
  30. What does this mean?<P>
  31. Basically this means using the right software you can read, see and even hear specific information that someone else has made public via your computer.<P>
  32. Okay okay, so you probably already know this since you are using a Web Browser <I>(a software program that alow you to interact with the World Wide Web)</I>  right now, but what kind of tutorial would this be without a definition of the Web?<P>
  33.  
  34. <P><HR><A NAME="Intro To WW?"><CENTER><H2>What is HTML Web Weaver?</H2></CENTER></A>
  35. HTML Web Weaver is a text editor that can assist you in developing World Wide Web pages <I>(a 'page' is a unit of information in the world of World Wide Web)</I><P>
  36. Web Pages are written in a text language called <EM>HyperText Markup Language</EM>, or <EM>HTML</EM> for short. This language is then read by your Web Browser and turned into the information, you the user see here.<P>
  37.  
  38. Example:<P>
  39.  
  40. <BLOCKQUOTE>Web Pages are written in a text language called <EM>HyperText Markup Language</EM>, or <EM>HTML</EM> for short. This language is then read by your Web Browser and turned into the information, you the user see here.</BLOCKQUOTE>
  41.  
  42. As you can see above, special characters are used to tell your Web Browser to do special things. These commands are called <EM>'tags'</EM>. As you can probably imagine, the variety of tags needed to create a <I>'nice'</I> Web page such as this one can be quite large and complex. HTML Web Weaver works by making these tags easier to use and require less memorization of their exact uses.
  43.  
  44. <P><HR><CENTER><A NAME="Text Styles"><H2>Text Styles</H2></CENTER></A>
  45. To draw different text styles in your Web pages you need to use specific tags around text.<P>
  46. Example:<BR>
  47. <B>This sentence should display in bold</B><BR>
  48. Would result in...<BR>
  49. <B>This sentence should display in bold</B><P>
  50. Multiple styles can also be used.
  51. Example:<BR>
  52. <B></I>This sentence should display in bold and Italic</I></B><BR>
  53. Would result in...<BR>
  54. <B><I>This sentence should display in bold and Italic</I></B><P>
  55. Here is a list of some of the text styles available with HTML Web Weaver...
  56. <UL><LI> Address - Use this to label text as being an address (usually email)
  57. <UL><LI> Example: <ADDRESS>Robert.Best@potsdam.edu</ADDRESS></UL>
  58. <LI> Blink - Use this to label text as blinking
  59. <UL><LI> Example: <BLINK>Blink</BLINK></UL>
  60. <LI> Block Quote - Use this to label text as being quote
  61. <UL><LI> Example: <BLOCKQUOTE>This is an example of how text would look like if you used the block quote HTML tag in your World Wide Web page.</BLOCKQUOTE></UL>
  62. <LI> Bold - Use this to label text as being in bold type face
  63. <UL><LI> Example: <B>Bold</B></UL>
  64. <LI> Center - Use this to label text as being centered on the page
  65. <UL><LI> Example: <CENTER>Center</CENTER></UL>
  66. <LI> Cite - Use this to label text as being a title of a book or movie
  67. <UL><LI> Example: <CITE>Cite</CITE></UL>
  68. <LI> Code - Use this to label text as being computer code
  69. <UL><LI> Example: <CODE>Code</CODE></UL>
  70. <LI> Definition - Use this to label text as a definition
  71. <UL><LI> Example: <DFN>Definition</DFN></UL>
  72. <LI> Emphasis - Use this to label text as needing emphasis
  73. <UL><LI> Example: <EM>Emphasis</EM></UL>
  74. <LI> Fixed Width - Use this to label text to be drawn in a mono spaced font
  75. <UL><LI> Example: <TT>Fixed Width</TT></UL>
  76. <LI> Font Size - Use this to label text as a specific font size
  77. <UL><LI> Example: <FONT SIZE=1>F</FONT><FONT SIZE=2>o</FONT><FONT SIZE=3>n</FONT><FONT SIZE=4>t</FONT> <FONT SIZE=5>S</FONT><FONT SIZE=6>i</FONT><FONT SIZE=7>z</FONT><FONT SIZE=6>e</FONT><FONT SIZE=5>s</FONT></UL>
  78. <LI> Header - Use this to label text as being a header in a specific font size
  79. <UL><LI> Example: <H1>Header Size 1</H1> <H2>Header Size 2</H2> <H3>Header Size 3</H3></UL>
  80. <LI> Italic - Use this to label text as being in italic type face
  81. <UL><LI> Example: <I>Italic</I></UL>
  82. <LI> Keyboard - Use this to label text as being from a typewriter
  83. <UL><LI> Example: <KBD>Keyboard</KBD></UL>
  84. <LI> Preformated text - Use this to label text to be draw '<I>as is</I>', just as if it were done on a typewriter, including spaces and carriage returns.
  85. <UL><LI> <PRE>Example: This is an example of how preformated text would look like in your World Wide Web browser.</PRE></UL>
  86. <LI> Sample - Use this to label text as being a sample item
  87. <UL><LI> Example: <SAMP>Sample</SAMP></UL>
  88. <LI> Strong Emphasis - Use this to label text as needing strong emphasis
  89. <UL><LI> Example: <STRONG>Strong Emphasis</STRONG></UL>
  90. <LI> Variable - Use this to label text as being a variable item
  91. <UL><LI> Example: <VAR>Variable</VAR></UL>
  92. </UL>
  93.  
  94.  
  95. <P><HR><CENTER><A NAME="Adding Graphics"><H2>Graphics and Images</H2></CENTER></A>
  96. So your wondering how all those other people put those cool pictures  on their Web pages?
  97. It's actually quite easy once you know a few things about how the Web uses graphics.
  98. <OL><LI> For starters, your graphics have to be saved in a special format called <EM>'GIF'</EM> <I>(there are other options, but GIF is by far the easiest and most widely used)</I>. To get your graphics into GIF format I recommend a shareware utility for converting most graphic files called <A HREF = "http://hyperarchive.lcs.mit.ed/HyperArchive/Archive/grf/util/gif-converter-237.hqx">'GIFConverter'</A>.
  99. <LI> Second you must properly place your files. In HTML your page document can only easily access other files <I>(in this case your graphic file)</I> if the files are either in the same folder as your web document or in subfolders <I>(or subdirectories for all you non-Macintosh people)</I>. I can't emphasis this enough, most of us have and probably will make this mistakes with this. <UL><LI> Note: You must also name your GIF files with the suffix <I>'.gif'</I>.
  100. </UL>
  101. <LI> Third you have to add the proper HTML tag in your Web page to connect your page with your GIF file. To do this you use the <I>'Files and Images'</I> command in HTML Web Weaver. This intern brings up Web Weaver's <I>'Files and Images Tag Editor'</I> which allows you to choose the file and settings you want. It is very important that before you are finished in the <I>'Files and Images Tag Editor'</I> you make sure the <I>'Directory Path'</I> field displays the correct path. The correct path <EM>SHOULD</EM> consists of the path <I>FROM</I> your Web document to your GIF file. <UL><LI> Example: If your Web file is in the folder <I>'Web Files Folder'</I> and your GIF file is in the subfolder <I>'My GIF files'</I> and is called <I>'MyGIF.gif'</I>. The your proper path should be: <SAMP>My GIF Files/MyGIF.gif</SAMP> <I>(Notice that the '<KBD>/</KBD>'character separates folders)</I>.
  102. </UL>
  103. </OL>
  104.  
  105.  
  106.  
  107. <P><HR><CENTER><A NAME="Connecting/Linking"><H2>Connecting/Linking</H2></CENTER></A>
  108. Making connections <I>(better know as <EM>links</EM>)</I> from your document to other resources such as...
  109. <UL><LI> other Web pages
  110. <LI> other Web Servers
  111. <LI> FTP servers
  112. <LI> news servers
  113. <LI> WAIS servers
  114. <LI> gopher servers
  115. <LI> telnet connections
  116. </UL>
  117. are created using Web Weaver's <I>'Links'</I> command.<BR>
  118. Once in Web Weaver's 'Link Editor' you are given options of link types...
  119. <UL><LI> http
  120. <UL><LI> This is a link to a different Web server</UL>
  121. <LI> gopher
  122. <UL><LI> This is a link to gopher server</UL>
  123. <LI> telnet
  124. <UL><LI> This is a link to make a telnet connection</UL>
  125. <LI> ftp
  126. <UL><LI> This is a link to ftp server</UL>
  127. <LI> wais
  128. <UL><LI> This is a link to wais server</UL>
  129. <LI> news
  130. <UL><LI> This is a link to news</UL>
  131. <LI> local html file
  132. <UL><LI> This is a link to a web page on the <I>same</I> Web server.
  133. <UL><LI> Note: The rules used for the location of graphic files and the path's from your page to your document <A HREF = "#Adding Graphics">discussed above</A> apply to local html file links.
  134. </UL></UL>
  135. </UL>
  136.  
  137. <P><HR><CENTER><A NAME="Getting Started"><H2>Getting Started The Right Way</H2></CENTER></A>
  138. Ready to get started?
  139. Before starting there are a few other HTML tags you should keep in mind...
  140. <UL><LI> Paragraph - In HTML paragraphs are separated with the Paragraph tag <I>(looks like a backwards P in Web Weaver)</I>
  141. <LI> Line Breaks - In HTML link breaks <I>(usually referred to as carriage returns in most other programs)</I> are separated by the Line Break tag
  142. <LI> Special Characters - In HTML there are special characters that can not easily be typed. As you might guess you can not just type a < or > any where in your document because they mean special things in HTML <I>(ie. used with tags)</I> so you need to insert special HTML tags <I>(called 'special characters' in Web Weaver)</I> in place of these characters.
  143. <LI> HTML - Use this tag when you want specify what sections of a document are written in HTML.
  144. <LI> Head - Use this tag when you want to specify the head of your HTML document
  145. <LI> Body - Use this tag when you want to specify the body of your HTML document
  146. <LI> Title - Use this tag to specify the title of your Web page <I>(In most Web Browser this becomes the name of the current window)</I>
  147. <LI> Comment - Use this tag when you want to add comments in your HTML documents that you don't want to be viewed in the users Web Browser.
  148. </UL>
  149. In most HTML documents ALL of your text is within this tag. In Web Weaver you can use the <I>'HTML Stationery'</I> file to have the proper default tags already created <I>(ie. HTML, head and body)</I>.
  150. If your interested in a more detailed list of HTML features and options checkout these Web pages...
  151. <UL>
  152. <LI> <A HREF = "http://arpp1.carleton.ca/machttp/doc/">http://arpp1.carleton.ca/machttp/doc/</A>
  153. <LI> <A HREF = "http://fire.clarkson.edu/doc/html/htut.html">http://fire.clarkson.edu/doc/html/htut.html</A>
  154. <LI> <A HREF = "http://home.mcom.com/home/how-to-create-web-services.html">http://home.mcom.com/home/how-to-create-web-services.html</A>
  155. <LI> <A HREF = "http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html">http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html</A>
  156. <LI> <A HREF = "http://152.1.24.177/teaching/manuscript/default.html">http://152.1.24.177/teaching/manuscript/default.html</A>
  157. </UL>
  158.  
  159.  
  160. <P><HR><CENTER><A NAME="Why WW?"><H2>What does HTML Web Weaver Offer That's Special?</H2></CENTER></A>
  161.  
  162. HTML Web Weaver allows you to easily and quickly create HTML documents by allowing you to write your document and then edit in your tags via a select-and-tag method. HTML Web Weaver also makes more complex HTML tags such as linking to other network services <I>(ie. Gopher, FTP, WAIS and WWW sites)</I> by using a simple information form format.<P>
  163.  
  164. <FONT SIZE=4><B>Why is HTML Web Weaver better than other programs?</B></FONT><BR>
  165. HTML Web Weaver provides you with both a simple and flexible interface, in other words, it's only as complex as you need it to be. HTML Web Weaver is designed to be very modular allowing a simple step to add new functions <I>(specifically HTML tags)</I> using a simple 'plug-in and play' interface <I>(see the file 'Installation Guide' for details)</I>.<P>
  166.  
  167. <FONT SIZE=4><B>Some of the key features of Web Weaver are...</B></FONT>
  168. <UL><LI> Easily customized
  169. <LI> Easy and quick to use
  170. <LI> Provides an easy method of previewing your document
  171. <LI> Provides the most extensive online help
  172. <LI> Includes a large library of HTML features and options
  173. </UL><P> <P>
  174.  
  175. <HR NOSHADE> 
  176. For more information on HTML Web Weaver please contact <a href=mailto:Robert.Best@potsdam.edu>Robert.Best@potsdam.edu</a>
  177. <H6>HTML Web Weaver ¬© 1995 Best Enterprises</H6>
  178.  
  179.  
  180. </BODY> 
  181. </HTML> 
  182.